<template>
  <div class="payBox">
    <van-cell></van-cell>
    <van-popup
      v-model="payShow"
      closeable
      close-icon-position="top-right"
      round
      style="width: 300px; height: 300px"
    >
      支付方式
      <!--  -->
      <van-radio-group
        v-model="radio"
        direction="horizontal"
        @click-close-icon.stop="close"
      >
        <van-radio name="0">微信</van-radio>
        <van-radio name="1">支付宝</van-radio>
        <van-radio name="2">电子支付</van-radio>
      </van-radio-group>
      <van-button type="primary" @click="goPay">确认支付</van-button>
    </van-popup>
  </div>
</template>

<script>
import { payBusOrder } from "@/service/busService";
export default {
  props: ["orderNum"],
  data() {
    return {
      payTyoe: ["微信", "支付宝", "电子支付"],
      radio: "0", // 支付单选状态
      payShow: true,
    };
  },
  methods: {
    fn() {
      console.log(123);
    },
    close() {
      this.$emit("closeFlag");
    },
    //支付巴士订单
    async goPay() {
      let info = {
        orderNum: this.orderNum,
        paymentType: this.payTyoe[this.radio],
      };
      const { data } = await payBusOrder(info);
      if (data.code !== 200) this.$toast(data.msg);
      this.$router.go(0);
    },
  },
};
</script>

<style lang="scss" scoped>
.payBox {
  padding: 20px;
  font-size: 16px;
  .van-popup {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    .van-radio-group {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>
